<!-- Vue单文件组件的脚本部分，使用setup语法糖简化组件逻辑 -->
<script setup>
// 从Vue中导入必要的响应式API
// ref: 创建基本类型的响应式数据
// reactive: 创建对象类型的响应式数据
// computed: 创建计算属性（基于其他响应式数据动态计算的值）
import { ref, reactive, computed } from "vue";

// 创建多个布尔类型的响应式变量，用于控制不同类名的应用
// isBox控制.box类是否生效
const isBox = ref(true);
// isBorder控制.border类是否生效
const isBorder = ref(true);
// isInner控制.inner类是否生效
const isInner = ref(true);
// isMeal控制.meal类是否生效（将在计算属性中使用）
const isMeal = ref(true);

// 创建响应式对象classObject，用于动态绑定类名
// 这里直接设置inner属性为true，表示默认应用.inner类
const classObject = reactive({ inner: true });

// 创建计算属性classMeal，根据isMeal的值动态返回类名对象
// 当isMeal.value为true时，返回{meal: true}，否则返回{meal: false}
// 计算属性会自动追踪依赖（isMeal），当依赖变化时自动更新
const classMeal = computed(() => ({ meal: isMeal.value }));
</script>

<!-- 模板部分，定义组件的HTML结构和数据绑定关系 -->
<template>
    <!--
        外层div：
        - 固定应用.text类（基础样式）
        - 通过v-bind:class绑定对象语法，根据isBox和isBorder的值动态添加类名
        - 当isBox为true时添加.box类，isBorder为true时添加.border类
    -->
    <div class="text" v-bind:class="{ box: isBox, border: isBorder }">
        <!--
            第一个子div：
            - 通过对象语法绑定class，当isInner为true时添加.inner类
        -->
        <div v-bind:class="{ inner: isInner }">春夏</div>

        <!--
            第二个子div：
            - 直接绑定响应式对象classObject，对象的key是类名，value是布尔值
            - 这里classObject={inner: true}，所以会应用.inner类
        -->
        <div v-bind:class="classObject">秋冬</div>

        <!--
            第三个子div：
            - 绑定计算属性classMeal，根据isMeal的值动态应用.meal类
        -->
        <div v-bind:class="classMeal">三餐四季</div>
    </div>
</template>

<!-- 样式部分，scoped属性确保样式只作用于当前组件 -->
<style scoped>
/* 基础文本样式：居中对齐，行高20px */
.text {
    text-align: center;
    line-height: 20px;
}

/* 盒子样式：宽度100%，白色到半透明白色的线性渐变背景 */
.box {
    width: 100%;
    background: linear-gradient(white, rgba(255, 255, 255, 0.8));
}

/* 边框样式：1px蓝色点状边框 */
.border {
    border: dotted 1px blue;
}

/* 内部元素样式：上外边距5px，宽100px，高30px，1px红色点状边框 */
.inner {
    margin-top: 5px;
    width: 100px;
    height: 30px;
    border: 1px dotted red;
}

/* 餐食相关样式：宽100px，高30px，1px蓝紫色虚线边框 */
.meal {
    width: 100px;
    height: 30px;
    border: 1px dashed blueviolet;
}
</style>